Bootstrap Snippet click animation with animate css using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel='stylesheet' type='text/css'>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css" rel='stylesheet' type='text/css'>
<div class="container">
    <div class="row">
<button class="btn btn-success" data-animation="bounce">Bounce</button>
<button class="btn btn-primary" data-animation="pulse">Pulse</button>
<button class="btn btn-default" data-animation="fadeInLeftBig">Fade in</button>
<button class="btn btn-info" data-animation="fadeOutRightBig">Fade out</button>
<button class="btn btn-danger" data-animation="flip">Flip</button>
<div id="circle"></div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {
    text-align: center;
    
}
#circle {
    border-radius: 50%;
    margin: 50px auto;
    width: 50px;
    height: 50px;
    background-color: #93d0ea;
}
.btn {
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    white-space: nowrap;
    width: 100px;
    height: 50px;
    margin: 10px 15px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var btn = document.querySelectorAll("button"),
        circle = document.querySelector("#circle");
// First, we have to add a class of animated to our object, so the library can recognize it.
circle.classList.add('animated');
// We iterate over all of our buttons and add event listeners to each one.
for (var i = 0; i < btn.length; i++) {
    // Define an anonymous function here, to make it possible to use the i variable.
    (function (i) {
        btn[i].addEventListener('click', function () {
            // To start an animation you just have to add a specific class to the object.
            // In our case we stored the classes' names in the data-animation attribute of each button.
            var animation = btn[i].getAttribute('data-animation');
            circle.classList.add(animation);
            // To make it work more then once we have to remove the class after the animation is complete.
            window.setTimeout(function () {
                circle.classList.remove(animation);
            }, 1000);
        });
    }(i));
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"click animation with animate css"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"click animation with animate css" Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"click animation with animate css"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY